<template>
  <div class="table-box">
    <ProTable :columns="columnProps" :request-api="SearchList" ref="refTable" title="用户列表">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button :icon="CirclePlus" @click="CreateData" type="success" v-auth="BtnAuthCreate">新增数据</el-button>
        <el-button :icon="Upload" @click="importData" plain type="primary" v-auth="BtnAuthImport">导入数据</el-button>
        <el-button :icon="Download" @click="ExportData" plain type="primary" v-auth="BtnAuthExport">导出数据</el-button>
        <el-button
          :disabled="!scope.isSelected"
          :icon="Delete"
          @click="DeleteData(scope.selectedListIds)"
          plain
          type="danger"
          v-auth="BtnAuthDelete"
        >
          删除选中
        </el-button>
      </template>

      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button :icon="EditPen" @click="UpdateData(scope.row)" link type="primary" v-auth="BtnAuthUpdate"> 编辑
        </el-button>
        <el-button :icon="Delete" @click="DeleteData(scope.row)" link type="primary" v-auth="BtnAuthDelete"> 删除
        </el-button>
      </template>
    </ProTable>
    <CreateUserAccount @reload="ReloadData" ref="refCreatePop"></CreateUserAccount>
    <UpdateUserAccount @reload="ReloadData" ref="refUpdatePop"></UpdateUserAccount>
    <ImportExcel ref="dialogRef" />
  </div>
</template>

<script lang="ts" name="accountManage" setup>
  import { ref } from "vue";
  import {
    requestUserAccountDelete,
    requestUserAccountExport,
    requestUserAccountImport,
    requestUserAccountSearch,
    requestUserAccountTemplateFile
  } from "@/api/modules/userAccount";
  import { ColumnProps } from "@/components/ProTable/interface";
  import { dtoUserAccountDelete, dtoUserAccountInfo } from "@/api/dbdto/dtoUserAccount";
  import { getUpdatedColumnsUserAccount } from "./columns/resetList";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { ResultData } from "@/api/interface";
  import { RespOk } from "@/constant/codes";
  import { UserAccount } from "./columns/data";
  import ImportExcel, { ExcelParameterProps } from "@/components/ImportExcel/index.vue";
  import { useDownload } from "@/hooks/useDownload";
  import { ExportMaxNum } from "@/constant/sys";
  import { GetNowDate } from "@/utils/date";
  import { BuildSearchWhere } from "@/utils/buildSearchWhere";
  import ProTable from "@/components/ProTable/index.vue";
  import { BtnAuthCreate, BtnAuthDelete, BtnAuthExport, BtnAuthImport, BtnAuthUpdate } from "@/constant/enums/btn_permission";
  import { CirclePlus, Delete, Download, EditPen, Upload } from "@element-plus/icons-vue";
  import CreateUserAccount from "./components/create.vue";
  import UpdateUserAccount from "./components/update.vue";
  import listColumns = UserAccount.listColumnsData;

  const refCreatePop = ref();
  const refUpdatePop = ref();
  const refTable = ref();
  //onBeforeMount
  const columnProps = ref < ColumnProps[] > (getUpdatedColumnsUserAccount(listColumns));

  //创建数据
  const CreateData = () => {
    refCreatePop.value.ShowPop();
  };

  //刷新数据
  const ReloadData = () => {
    if (refTable.value) {
      refTable.value.getTableList();
    }
  };

  //删除数据(可以批量也可以删除单个)
  const DeleteData = (data: dtoUserAccountInfo | number[]) => {
    let ids = Array.isArray(data) ? data : [data["id"]];
    ElMessageBox.confirm("删除后不可恢复，是否确定?", "删除确认，共" + ids.length + "条数据", {
      confirmButtonText: "确定",
      cancelButtonText: "再想想",
      type: "warning"
    }).then(() => {
      let params: dtoUserAccountDelete = {
        id: ids
      };
      requestUserAccountDelete(params).then((res: ResultData<any>) => {
        if (res.code == RespOk) {
          ElMessage({ type: "success", message: "删除完成" });
          refTable.value.getTableList();
        }
      });
    });
  };
  const UpdateData = (row: dtoUserAccountInfo) => {
    refUpdatePop.value.ShowPop(row);
  };

  // 导入数据
  const dialogRef = ref < InstanceType < typeof ImportExcel > | null > (null);
  const importData = () => {
    const params: ExcelParameterProps = {
      title: "UserAccount",
      tempApi: requestUserAccountTemplateFile, //下载模板文件api
      importApi: requestUserAccountImport, //上传api
      getTableList: refTable.value?.getTableList
    };
    dialogRef.value?.acceptParams(params);
  };

  // 导出数据
  const ExportData = async () => {
    //构造查询参数
    let searchParams = BuildSearchWhere(refTable.value?.searchParam, columnProps.value);
    searchParams.extra.pageSize = ExportMaxNum; //设置最大导出数量
    ElMessageBox.confirm("如果导出数据大于" + ExportMaxNum + "条请分批导出", "温馨提示", { type: "warning" }).then(() =>
      useDownload(requestUserAccountExport, "exportUserAccount" + GetNowDate(), searchParams)
    );
  };

  const SearchList = (params: any) => {
    //构造查询参数
    let searchParams = BuildSearchWhere(params, columnProps.value);
    //向后端发送请求
    return requestUserAccountSearch(searchParams);
  };


</script>
